<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-upload">
      <input-normal label="导出表头" v-model="commonAttr.tableName" @change="onChangeAttr"></input-normal>
      <input-normal label="限制上传文件大小(M)" placeholder="2" v-model="commonAttr.uploadLimitSize" @change="onChangeAttr"></input-normal>
      <switch-normal v-model="commonAttr.need" label="设为必选项" @change="onChangeAttr"></switch-normal>
      <add-img-con :url="commonAttr.imgUrl" comAttr="commonAttr" picAttr="imgUrl" class="margin-left-right-16"></add-img-con>
      <input-normal label="默认图片" v-model="commonAttr.imgUrl" @change="onChangeAttr"></input-normal>
      <switch-normal v-model="commonAttr.isDisplayDeleteBtn" label="显示删除按钮" @change="onChangeAttr"></switch-normal>
      <slider-normal v-model="commonAttr.uploadCount" label="限制上传数量" :max="5" :step="1" @change="onChangeAttr"></slider-normal>
      <dropdown-normal label="截图类型" :valLists="SAVE_IMG_DATA_TYPES" v-model="commonAttr.saveImgType" @change="onChangeAttr"></dropdown-normal>
      <input-normal v-if="commonAttr.saveImgType == SAVE_IMG_DATA_TYPES[0].value" v-model="commonAttr.saveImgQuality" label="图片质量" placeholder="0.8"  @change="onChangeAttr"></input-normal>
    </el-form>
  </right-template>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { SAVE_IMG_DATA_TYPES } from '@/const/'

const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
</script>